<template>
  <div class="meteor-shower-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let ctx = null
let animationFrame = null
let meteors = []
let stars = []

class Star {
  constructor(canvas) {
    this.canvas = canvas
    this.x = Math.random() * canvas.width
    this.y = Math.random() * canvas.height
    this.size = Math.random() * 2
    this.opacity = Math.random()
    this.twinkleSpeed = Math.random() * 0.02 + 0.01
  }

  update() {
    this.opacity += this.twinkleSpeed
    if (this.opacity > 1 || this.opacity < 0) {
      this.twinkleSpeed = -this.twinkleSpeed
    }
  }

  draw(ctx) {
    ctx.save()
    ctx.globalAlpha = this.opacity
    ctx.fillStyle = '#ffffff'
    ctx.shadowBlur = 5
    ctx.shadowColor = '#ffffff'
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fill()
    ctx.restore()
  }
}

class Meteor {
  constructor(canvas) {
    this.canvas = canvas
    this.reset()
  }

  reset() {
    this.x = Math.random() * this.canvas.width
    this.y = -50
    this.length = Math.random() * 80 + 50
    this.speed = Math.random() * 15 + 10
    this.angle = Math.PI / 4 + (Math.random() - 0.5) * 0.3
    this.opacity = 1
    this.width = Math.random() * 2 + 1
    
    // 随机选择流星颜色
    const colors = [
      { r: 255, g: 255, b: 255 },
      { r: 180, g: 220, b: 255 },
      { r: 255, g: 200, b: 150 },
      { r: 200, g: 255, b: 255 }
    ]
    this.color = colors[Math.floor(Math.random() * colors.length)]
  }

  update() {
    this.x += Math.cos(this.angle) * this.speed
    this.y += Math.sin(this.angle) * this.speed
    this.opacity -= 0.01

    if (this.opacity <= 0 || this.y > this.canvas.height + 50) {
      this.reset()
    }
  }

  draw(ctx) {
    ctx.save()
    ctx.globalAlpha = this.opacity

    // 创建流星尾迹渐变
    const gradient = ctx.createLinearGradient(
      this.x,
      this.y,
      this.x - Math.cos(this.angle) * this.length,
      this.y - Math.sin(this.angle) * this.length
    )
    gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`)
    gradient.addColorStop(0.5, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.5)`)
    gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`)

    // 绘制流星
    ctx.strokeStyle = gradient
    ctx.lineWidth = this.width
    ctx.lineCap = 'round'
    ctx.shadowBlur = 10
    ctx.shadowColor = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.8)`

    ctx.beginPath()
    ctx.moveTo(this.x, this.y)
    ctx.lineTo(
      this.x - Math.cos(this.angle) * this.length,
      this.y - Math.sin(this.angle) * this.length
    )
    ctx.stroke()

    // 绘制流星头部光点
    const headGradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.width * 3)
    headGradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`)
    headGradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`)
    
    ctx.fillStyle = headGradient
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.width * 3, 0, Math.PI * 2)
    ctx.fill()

    ctx.restore()
  }
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  ctx = canvas.getContext('2d')

  // 创建星星
  stars = []
  const starCount = Math.floor((canvas.width * canvas.height) / 5000)
  for (let i = 0; i < starCount; i++) {
    stars.push(new Star(canvas))
  }

  // 创建流星
  meteors = []
  for (let i = 0; i < 5; i++) {
    const meteor = new Meteor(canvas)
    meteor.y = Math.random() * canvas.height - 50
    meteors.push(meteor)
  }

  animate()
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  // 创建深空背景
  const gradient = ctx.createRadialGradient(
    canvasRef.value.width / 2,
    canvasRef.value.height / 2,
    0,
    canvasRef.value.width / 2,
    canvasRef.value.height / 2,
    canvasRef.value.width / 2
  )
  gradient.addColorStop(0, '#0a0a20')
  gradient.addColorStop(0.5, '#050515')
  gradient.addColorStop(1, '#000000')
  
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  // 更新和绘制星星
  stars.forEach(star => {
    star.update()
    star.draw(ctx)
  })

  // 更新和绘制流星
  meteors.forEach(meteor => {
    meteor.update()
    meteor.draw(ctx)
  })

  // 随机生成新流星
  if (Math.random() < 0.02 && meteors.length < 10) {
    meteors.push(new Meteor(canvasRef.value))
  }

  animationFrame = requestAnimationFrame(animate)
}

const handleResize = () => {
  if (!canvasRef.value) return
  canvasRef.value.width = window.innerWidth
  canvasRef.value.height = window.innerHeight
}

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.meteor-shower-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

